<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../mixins/resize";
import $ from "jquery";
import moment from "moment";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
  },
  data() {
    return {
      chart: null,
      titletext: "",
      commonexitdata: [],
      importexitdata: [],
    };
  },
  created() {
    let _this = this;
    $.ajax({
      url: process.env.VUE_APP_BASE_API + "/tietasystem/index/chartExitNums",
      //async: false,
      success: function (res) {
        _this.commonexitdata = res.data.exitCommonNums;
        _this.importexitdata = res.data.exitImportantNums;
        _this.titletext = res.msg;
        let option = _this.initOption();
        _this.setOption(option);
      },
      error: function (e) {
        console.log(e);
      },
    });
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
      let option = this.initOption();
      this.setOption(option);
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
    },
    getSeries() {
      let series = new Array();
      series.push({
        name: "关键站址退服",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: this.importexitdata,
      });
      series.push({
        name: "普通站址退服",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: this.commonexitdata,
      });
      return series;
    },
    initOption() {
      return {
        title: {
          text:
            "各城市退服站址数量(" +
            moment(this.titletext, "YYYYMMDDHHmm").format("lll") +
            ")",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
        },
        xAxis: {
          type: "category",
          axisLabel: {
            interval: 0,
          },
          data: [
            "沈阳市",
            "大连市",
            "鞍山市",
            "抚顺市",
            "本溪市",
            "丹东市",
            "锦州市",
            "营口市",
            "阜新市",
            "辽阳市",
            "铁岭市",
            "朝阳市",
            "盘锦市",
            "葫芦岛市",
          ],
        },
        series: this.getSeries(),
      };
    },
    setOption(option) {
      this.chart.setOption(option);
    },
  },
};
</script>
